<!-- 公共视频 -->

<template>
  <div class="CommonVideo">
    <component :is="`${playerName}Player`" ref="component" :value="value" :index="index" :visible="visible" />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import props from './props'
import API from './API'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'CommonVideo',

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      info: API.transInfo(), // 视频信息
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 视频路径
     */
    videoSrc() {
      const { info, src } = this
      if (src) return src
      for (const proto of ['rtc', 'rtmp', 'rtmps', 'rtsp', 'rtsps']) {
        if (this[proto] || this.proto === proto) return info[proto]
      }
      for (const proto of ['https', 'http', 'wss', 'ws']) {
        if (this[proto] || this.proto === proto) {
          for (const type of ['mp4', 'flv', 'ts', 'm3u8']) {
            if (this[type] || this.type === type) return info[`${proto}_${type}`]
          }
          return info[`${proto}_m3u8`]
        }
      }
      for (const type of ['mp4', 'flv', 'ts', 'm3u8']) {
        if (this[type] || this.type === type) return info[`http_${type}`]
      }
      return info.http_m3u8
    },

    /**
     * 视频编号
     */
    videoCode() {
      const { info, code } = this
      if (code) return code
      return info.thirdCode
    },

    /**
     * 播放器名称
     */
    playerName() {
      const { player } = this
      if (this.h5 || player === 'h5') return 'H5'
      if (this.hk || player === 'hk') return 'Hk'
      if (this.dh || player === 'dh') return 'Dh'
      if (this.h265 || player === 'h265') return 'H265'
      return 'Ali'
    },

    /**
     * 播放器数值
     */
    value() {
      return ['Hk', 'Dh'].includes(this.playerName) ? this.videoCode : this.videoSrc
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听 ID
     */
    id: {
      immediate: true,
      handler(id) {
        const name = this.name ? ` : ${this.name}` : ''
        API.getInfo({ id }, `【 __全局__ > 视频 】 查询视频信息${name}`)
          .then((obj) => {
            this.info = API.transInfo(obj)
          }).catch((e) => {
            CORE.MSG.error(e.message)
          })
      },
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
